<template>
  <view class="drop-down-menu-item" :style="{ width: titleItemWidth }" @click.stop.prevent="titleItemClick(item, index)" @touchmove.stop.passive="preventClick">
    <text class="text" :style="{ fontSize: menuFontSize, color: selectedNumber > 0 ? activeColor : inactiveColor }">{{ newTitle }}</text>
    <view v-if="item.type !== 8" class="arrows-box" :style="{ background: arrowsBackground }">
      <text v-if="showNumb" class="number" :style="{ color: selectedNumber > 0 ? activeColor : inactiveColor }">
        {{ selectedNumber }}
      </text>
      <view style="transform: scale(0.5)">
        <mxp-icon
          name="xiasanjiao"
          :color="selectedNumber > 0 ? activeColor : inactiveColor"
          size="12px"
          :cusStyle="{
            transformOrigin: 'center center',
            transition: 'transform 0.3s',
            transform: currentIndex === index && arrowsState ? 'rotate(180deg)' : 'rotate(0deg)',
          }"
        ></mxp-icon>
      </view>
    </view>
    <view v-if="item.type === 8" key="view-2" class="dui-box" :style="radioIconStyle">
      <mxp-icon name="dui" :color="isRadio ? '#ffffff' : inactiveColor" size="12px"></mxp-icon>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import MxpIcon from '../../mxp-icon/mxp-icon.vue';
  import type { $TrimTitleListItem } from '../mxp-drop-down-multiple.vue';
  import type { $AllColorStr, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import { type CSSProperties, type PropType, computed } from 'vue';
  import type { $NewSelected } from './type';
  import { isObject } from '@/mxp-ui/mxp-tool/utils/verify';
  defineOptions({
    name: 'title-item',
  });

  const props = defineProps({
    /** 标题了的宽度，默认五个以内就平均分配，五个以上每项宽度为20% */
    titleItemWidth: { type: String as PropType<$SizeUnitStr | `${number}%`>, required: true },
    /** 菜单 */
    item: { type: Object as PropType<$TrimTitleListItem>, required: true },
    /** 当前选中项的索引 */
    currentIndex: { type: Number, required: true },
    /** 箭头状态 */
    arrowsState: { type: Boolean, required: true },
    /** 筛选列表 */
    index: { type: Number, required: true },
    /** 未选中颜色 */
    inactiveColor: { type: String as PropType<$AllColorStr>, required: true },
    /** 选中颜色颜色 */
    activeColor: { type: String as PropType<$AllColorStr>, required: true },
    /** 菜单的 的文字大小 */
    menuFontSize: { type: String as PropType<$SizeUnitStr>, required: true },
    /** 菜单的 的文字大小 */
    arrowsBackground: { type: String as PropType<$AllColorStr>, required: true },
    /** 默认选中 */
    selected: { type: Object as PropType<$NewSelected['selectedDetails']>, required: true },
  });
  const emits = defineEmits<{
    (e: 'titleClick', item: $TrimTitleListItem, index: number): void;
  }>();

  /**
   * 阻止传递
   */
  function preventClick() {
    // 阻止传递
  }

  const isRadio = computed(() => props.item.type === 8 && props.item.defaultValue[0]);

  const radioIconStyle = computed<CSSProperties>(() => {
    return isRadio.value
      ? { background: props.activeColor, border: `1px solid ${props.activeColor}` }
      : { background: 'transparent', border: `1px solid ${props.inactiveColor}` };
  });

  const newTitle = computed(() => {
    if (props.item.isMultiple) {
      return props.item.title;
    } else {
      if (props.selected[props.item.key] && Array.isArray(props.selected[props.item.key])) {
        const list = props.selected[props.item.key] as unknown[];
        return list.length > 0 && isObject(list[0]) && 'label' in list[0]! ? list[0]!.label : props.item.title;
      }
      return props.item.title;
    }
  });

  const selectedNumber = computed(() => {
    if (props.item.type === 8) {
      return props.item.defaultValue[0] ? 1 : 0;
    } else if ([1, 2, 3, 4].includes(props.item.type) && props.item.isAlone) {
      let numb = 0;
      const def = props.item.defaultValue as Record<number | string, unknown[]>;
      for (const key in def) {
        const element = def[key] as unknown[];
        numb += element.length;
      }
      return numb;
    } else {
      const def = props.item.defaultValue as unknown[];
      return def.length;
    }
  });
  const showNumb = computed(() => selectedNumber.value > 0 && (props.item.isMultiple || ([1, 2, 3, 4].includes(props.item.type) && props.item.isAlone)));

  /**
   * 点击标题
   */
  function titleItemClick(item: $TrimTitleListItem, index: number) {
    emits('titleClick', item, index);
  }
</script>

<style scoped lang="scss">
  .drop-down-menu-item {
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    padding: 0 8px;

    .text {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .number {
      font-size: 12px;
      font-weight: bold;
      transform: scale(0.7);
      transform-origin: right center;
    }

    .arrows-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 0 2px;
      margin-left: 4px;
      background: #eeeeee;
      border-radius: 4px;
    }

    .dui-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      margin-left: -6px;
      overflow: hidden;
      border-radius: 50%;
      transform: scale(0.3);
    }
  }
</style>
